<div id="mywebgl" style="width:400px;height:300px;outline: 1px solid red;"></div>
<script type="module">
    import { WebGL } from 'vislite';

    var painter = new WebGL(document.getElementById('mywebgl'));

    var image = new Image();
    image.onload = function () {

        painter.render({
            mesh: [{
                geometry: {
                    attributes: {
                        position: {
                            array: [
                                -0.8, 1, 0,
                                0.8, 1, 0,
                                -0.8, -1, 0,
                                0.8, -1, 0
                            ],
                            count: 4,
                            itemSize: 3
                        },
                        uv: {
                            array: [
                                0, 0,
                                1, 0,
                                0, 1,
                                1, 1
                            ],
                            count: 4,
                            itemSize: 2
                        }
                    },
                    index: {
                        array: [0, 1, 2, 1, 2, 3],
                        count: 6,
                        itemSize: 1
                    },
                    type: "TRIANGLES"
                },
                material: {
                    image: {
                        value: image
                    }
                }
            }]
        })

    };
    image.src = "./images/girl.jpeg";
</script>